<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
            text-decoration: none;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        b {
            font-weight: bold;
            display: inline-block;
            width: 90px;
            text-align: right;
        }

        form{
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .text {
            width: 200px;
            height: 25px;
            line-height: 25px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding-left: 5px;
            margin-bottom: 10px;
        }

        .text_small {
            width: 100px;
            height: 25px;
            line-height: 25px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding-left: 5px;
            margin-bottom: 10px;
        }

        .btn_group {
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 100px;
        }

        .btn{
            width: 80px;
            height: 30px;
            line-height: 30px;
            border: none;
            border-radius: 5px;
            background-color: #ccc;
            color: black;
            font-size: 16px;
            cursor: pointer;
            margin-right: 10px;
        }

        .intro {
            display: flex;
            margin-top: 10px;
            margin-bottom: 10px;
            align-items: center;
        }

        .intro_label {
            font-weight: bold;
            display: inline-block;
            width: 90px;
            text-align: center; /* 文字居中 */
            margin-right: 10px;
        }

        .photo-preview-container {
            margin-left: 100px;
            margin-top: 10px;
        }
        
        #photo-preview {
            max-width: 200px;
            max-height: 200px;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none;
        }   

        /* 验证码相关样式 */
        .captcha-container {
            display: flex;
            align-items: center;
            margin-left: 95px;
            margin-bottom: 10px;
        }

        #captcha-image {
            width: 120px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-left: 10px;
            cursor: pointer;
        }

        .captcha-refresh {
            margin-left: 10px;
            color: #0066cc;
            cursor: pointer;
            font-size: 14px;
        }

        .captcha-refresh:hover {
            text-decoration: underline;
        }

        .error-message {
            color: red;
            font-size: 14px;
            margin-left: 100px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p><span style="color:blue;">欢迎注册会员</span></p>
        <form action="" method="post">
            <label for="phone">
                <b>手机号码：</b><input type="text" name="phone" id="phone" placeholder="11位手机号" class="text"
                    required></label>
            <label style="color:red;">必填</label><br>
        </form>
        <form action="" method="post">
            <label for="password">
                <b>创建密码：</b><input type="password" name="password" maxlength="8" id="password" placeholder="8位密码"
                    class="text" required></label>
            <label style="color:red;">必填</label><br>
        </form>
        <form action="" method="post">
            <label for="email">
                <b>注册邮箱：</b><input type="email" name="email" id="email" placeholder="邮箱地址" class="text"
                    required></label>
            <label style="color:red;">必填</label><br>
        </form>
        <form action="" method="post">
            <b>验证码：</b><input type="text" name="code" id="code" class="text"><br>
            <div class="captcha-container">
                <canvas id="captcha-image"></canvas>
                <span class="captcha-refresh" id="refresh-captcha">换一张</span>
            </div>
            <div class="error-message" id="captcha-error"></div>
        </form>
        <form action="" method="post">
            <b>性别：</b><label><input type="radio" name="gender" value="male">男</label>
            <label><input type="radio" name="gender" value="female">女</label><br>
        </form>
        <form action="" method="post">
            <b>生日：</b><input type="date" name="birthday" id="birthday" class="text"><br>
        </form>
        <form action="" method="post">
            <b>年龄：</b><input type="number" name="age" id="age" min="1" max="120" class="text"><br>
        </form>
        <form action="" method="post">
            <b>籍贯：</b><select name="province" id="province" class="text_small">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="湖北" selected="selected">湖北</option>
            </select>
            <select name="city" id="city" class="text_small">
                <option value="武汉" selected="selected">武汉</option>
                <option value="长沙">长沙</option>
                <option value="郑州">郑州</option>
                <option value="广州">广州</option>
            </select><br>
        </form>
        <form action="" method="post">
        <b>个人学历：</b><select name="education" id="education" class="text">
            <option value="初中">初中</option>
            <option value="高中">高中</option>
            <option value="大专">大专</option>
            <option value="本科" selected="selected">本科</option>
            <option value="硕士">硕士</option>
            <option value="博士">博士</option>
        </select><br>
        </form>
        <form action="" method="post">
            <b>月薪：</b><input type="range" name="salary" id="salary" min="0" max="5000" step="100" value="2500">
            <span id="msg"></span><br>
        </form>
        <form action="" method="post">
            <b>个人爱好：</b><label><input type="checkbox" name="hobby" value="sing">唱歌</label>
            <label><input type="checkbox" name="hobby" value="run">跑步</label>
            <label><input type="checkbox" name="hobby" value="swim">游泳</label><br>
        </form>
        <form action="/upload" method="post" enctype="multipart/form-data">
            <b>个人照片：</b><input type="file" name="photo" id="photo" accept="image/*"><br>
            <div class="photo-preview-container">      <!-- 照片预览容器 -->
                <img id="photo-preview" alt="照片预览">
            </div>
        </form>
        <div class="intro">
            <b class="intro-label">个人简介：</b>
            <textarea name="intro" cols="30" rows="10"></textarea><br>
        </div>
        <form action="" method="post" class="btn_group">
            <input type="submit" value="提交" class="btn">
            <input type="reset" value="重填" class="btn" id="reset-btn">
        </form>
    </div>


    <script>
        var msg = document.getElementById("msg");     // 根据id值找到span元素
        window.onload = function () {               // 页面加载完毕后
            msg.innerHTML = document.getElementById("salary").value;           // 显示默认值
            generateCaptcha();
        }
        document.getElementById("salary").onchange = function () {
            msg.innerHTML = this.value;
        }
        
        // 照片预览功能
        const photoInput = document.getElementById('photo');
        const photoPreview = document.getElementById('photo-preview');
        const resetBtn = document.getElementById('reset-btn');

        // 当选择照片时触发预览
        photoInput.addEventListener('change', function(e) {
            // 检查是否有选中文件
            if (e.target.files && e.target.files[0]) {
                // 确保是图片文件
                const fileType = e.target.files[0].type;
                if (fileType.startsWith('image/')) {
                    const reader = new FileReader();
                    
                    // 读取文件完成后显示预览
                    reader.onload = function(e) {
                        photoPreview.src = e.target.result;
                        photoPreview.style.display = 'block'; // 显示图片
                    }
                    
                    // 读取文件为DataURL
                    reader.readAsDataURL(e.target.files[0]);
                } else {
                    alert('请选择图片文件');
                    photoInput.value = ''; // 清除非图片文件的选择
                }
            }
        });

        // 重置按钮功能增强，清除预览图片
        resetBtn.addEventListener('click', function() {
            photoPreview.src = '';
            photoPreview.style.display = 'none';
            photoInput.value = '';
        });

        // 验证码功能
        let captchaCode = ''; // 存储正确的验证码
        
        // 生成随机验证码
        function generateCaptcha() {
            const canvas = document.getElementById('captcha-image');
            const ctx = canvas.getContext('2d');
            
            // 设置canvas尺寸
            canvas.width = 120;
            canvas.height = 30;
            
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 生成随机背景色
            const bgColor = getRandomColor(200, 255);
            ctx.fillStyle = bgColor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 验证码字符集
            const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
            captchaCode = '';
            
            // 生成4个随机字符
            for (let i = 0; i < 4; i++) {
                const char = chars.charAt(Math.floor(Math.random() * chars.length));
                captchaCode += char;
                
                // 随机字符颜色
                ctx.fillStyle = getRandomColor(50, 150);
                
                // 随机字体大小
                const fontSize = 16 + Math.random() * 8;
                ctx.font = `${fontSize}px Arial`;
                
                // 随机旋转角度
                const angle = (Math.random() - 0.5) * 0.5;
                
                // 绘制字符
                ctx.save();
                ctx.translate(20 + i * 25, 22);
                ctx.rotate(angle);
                ctx.fillText(char, 0, 0);
                ctx.restore();
            }

            // 添加干扰线
            for (let i = 0; i < 5; i++) {
                ctx.strokeStyle = getRandomColor(100, 200);
                ctx.beginPath();
                ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
                ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
                ctx.stroke();
            }
            
            // 添加干扰点
            for (let i = 0; i < 30; i++) {
                ctx.fillStyle = getRandomColor(50, 200);
                ctx.beginPath();
                ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, 2 * Math.PI);
                ctx.fill();
            }
        }

        // 生成随机颜色
        function getRandomColor(min, max) {
            const r = Math.floor(Math.random() * (max - min + 1)) + min;
            const g = Math.floor(Math.random() * (max - min + 1)) + min;
            const b = Math.floor(Math.random() * (max - min + 1)) + min;
            return `rgb(${r}, ${g}, ${b})`;
        }
        
        
        // 点击刷新验证码
        document.getElementById('refresh-captcha').addEventListener('click', generateCaptcha);
        document.getElementById('captcha-image').addEventListener('click', generateCaptcha);
        
        // 表单提交验证
        document.getElementById('submit-btn').addEventListener('click', function(e) {
            const userInput = document.getElementById('code').value.trim();
            const errorElement = document.getElementById('captcha-error');
            
            // 验证验证码
            if (userInput === '') {
                e.preventDefault(); // 阻止表单提交
                errorElement.textContent = '请输入验证码';
                return false;
            }
            
            if (userInput.toLowerCase() !== captchaCode.toLowerCase()) {
                e.preventDefault(); // 阻止表单提交
                errorElement.textContent = '验证码不正确，请重新输入';
                // 自动刷新验证码
                generateCaptcha();
                return false;
            }
            
            // 验证码正确，清除错误信息
            errorElement.textContent = '';
            return true;
        });
        
        // 输入验证码时清除错误信息
        document.getElementById('code').addEventListener('input', function() {
            document.getElementById('captcha-error').textContent = '';
        });s
    </script>
</body>

</html>